import {Component} from 'react'
import Footer from './components/Footer';
import Header from './components/Header';
/**
 * 外部数据props
 * 1. 父组件可以向子组件传递数据，传递的数据可以是状态数据，也可以是写死的数据
 *    1-1. 如何传递呢？ 在父组件中，通过给子组件绑定标签属性的方式传递
 *    1-2. 如何接收？ 在子组件的实例对象的 props属性上进行接收
 * 
 * 2. 当执行setState 改变父组件传递给子组件的状态数据时，父组件重新render，子组件也会无条件重新render
 */
class App extends Component{
    state = {
        count:0,
        msg:'atguigu'
    }
    render(){
        console.log('App render');
        let {count, msg} = this.state;
        return <div>
            <h3>App</h3>
            <p>App state count: {count}</p>
            <p>App state msg: {msg}</p>
            <p><button onClick={()=>{
                this.setState({
                    count:count + 1
                })
            }}>count++</button></p>
            <Header num={count} school='尚硅谷'/>
            <hr/>
            <Footer/>
        </div>
    }
}
export default App;